<template>
  <div class="page-container">
    <div class="section-item">
      <div class="section-item-header">基础信息</div>
      <div class="section-item-content">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="品牌">{{ driverData.arr.brandName }}</a-descriptions-item>
          <a-descriptions-item label="车系">{{ driverData.arr.seriesName }}</a-descriptions-item>
          <a-descriptions-item label="车型">{{ driverData.arr.modelName }}</a-descriptions-item>
          <a-descriptions-item label="年款">{{ driverData.arr.yearStyleName }}</a-descriptions-item>
          <a-descriptions-item label="驱动方式">{{ driverData.arr.driveTypeStr }}</a-descriptions-item>
          <a-descriptions-item label="变速箱">{{ driverData.arr.gearboxTypeStr }}</a-descriptions-item>
          <a-descriptions-item label="能源类型">{{ driverData.arr.fuelOilTypeStr }}</a-descriptions-item>
          <a-descriptions-item label="排量" v-if="+driverData.arr?.fuelOilType !== 0">{{
            driverData.arr.outputVolume
          }}</a-descriptions-item>
          <a-descriptions-item label="燃料标号" v-if="+driverData.arr?.fuelOilType !== 0">{{
            driverData.arr.fuelGradeStr
          }}</a-descriptions-item>
          <a-descriptions-item label="车门数">{{ driverData.arr.doorCount }}</a-descriptions-item>
          <a-descriptions-item label="座位数">{{ driverData.arr.seatNum }}</a-descriptions-item>
          <a-descriptions-item label="车型分类">{{ filtersSortList() }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
    <a-divider :margin="16" />
    <div class="section-item">
      <div class="section-item-header">车型图片</div>
      <div class="section-item-content">
        <upload-img title="缩略图" v-model="modelImgListData" single disabled margin />
        <upload-img title="整车图" v-model="modelImgCarIdData" single disabled margin />
        <upload-img title="细节图" v-model="modelImgDetailIdDataList" disabled margin />
      </div>
    </div>
  </div>
</template>

<script setup name="CarModelDetail">
  import { reactive, onMounted, ref } from 'vue'
  import { getCarModelDetail } from '@/api/asset/carModel'
  import { useRouter } from 'vue-router'
  const router = useRouter()

  const driverData = reactive({ arr: [] }) // 详情信息
  const modelImgListData = ref(null) // 缩略图
  const modelImgCarIdData = ref(null) // 整车图
  const modelImgDetailIdDataList = ref(null) // 细节图

  const filtersSortList = () => {
    if (driverData.arr && driverData.arr.sortList?.length > 0) {
      const newList = driverData.arr.sortList.map((o) => {
        return o.sortName
      })
      return newList.join(' | ')
    } else {
      return '-'
    }
  }

  const getCarModelDetailApi = (id) => {
    getCarModelDetail({ id }).then(({ result }) => {
      const { modelImgIdList, modelImgCarIdList, modelImgDetailIdList } = result
      driverData.arr = result
      modelImgListData.value = modelImgIdList?.length > 0 ? modelImgIdList[0] : ''
      modelImgCarIdData.value = modelImgCarIdList?.length > 0 ? modelImgCarIdList[0] : ''
      modelImgDetailIdDataList.value = modelImgDetailIdList || []
    })
  }

  onMounted(() => {
    const id = router.currentRoute.value.params.id
    getCarModelDetailApi(id)
  })
</script>

<style lang="less" scoped>
  .section-item {
    .section-item-header {
      color: #1d2129;
      font-weight: 500;
    }
  }
</style>
